<template>
  <div class="search-bar">
    <van-nav-bar 
      :border="border" 
      :fixed="fixed" 
      :placeholder="placeholder" 
      :z-index="zIndex" 
      @click-left="_onOrigin"
    >
      <template #left>
        <div class="origin side">
          <span class="name van-ellipsis">{{ currentCity ? currentCity.regionName : '定位中' }}</span>
          <van-icon class="icon" name="location-o" />
        </div>
      </template>
      <template #title>
        <div class="search" @click="_onSearch">
          <van-icon class="icon" name="search" />
          <span class="title">找电影、影院</span>
        </div>
      </template>
      <template #right>
        <div class="icon-btn side">
          <van-image :src="qpm" @click="_onOrder"></van-image>
          <van-image :src="kf" @click="_onHelp"></van-image>
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { getRandomId } from '@/utils/util'
import { mapGetters } from 'vuex'

export default {
  name: "SearchBar",
  props: {
    border: {
      type: Boolean,
      default: false,
    },
    fixed: {
      type: Boolean,
      default: true,
    },
    placeholder : {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: [Number, String],
      default: 99,
    }
  },
  computed: {
    ...mapGetters([
      'currentCity'
    ])
  },
  data() {
    return {
      qpm: require('../../assets/icons/qpm.png'),
      kf: require('../../assets/icons/kf.png')
    }
  },
  methods: {
    _onOrigin() {
      this.$router.push('city-select')
    },
    _onSearch() {
      // 定位没走完 不让搜索
      if (!this.currentCity) return
      this.$router.push(`/search?random=${getRandomId()}`)
    },
    _onOrder() {
      console.log('取票码')
    },
    _onHelp() {
      console.log('客服')
    }
  },
};
</script>

<style lang="scss" scoped>
.search-bar {
  /deep/ .van-nav-bar__left, /deep/ .van-nav-bar__right {
    box-sizing: border-box;
    width: 28%;
  }
  /deep/ .van-nav-bar__title {
    width: 44%;
  }
  .side {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .origin {
    .name {
      flex: 1;
    }
    .icon {
      font-size: 16px;
    }
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 15px;
    color: $unactive;
    background-color: $pageBg;
    .icon {
      margin-right: 5px;
      font-size: 16px;
    }
    .title {
      font-size: 12px;
    }
  }
  .icon-btn {
    .van-image {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
